import React, { Component } from 'react';
import { connect } from "react-redux";
import Item from "../../components/productlist";
import "./index.css"

import { getProduct } from "../../store/action/indexAction";

class Index extends Component {

    componentDidMount() {
        if (this.props.productlist.length === 0) {
           this.loadData();
        }

    }
    

    loadData() {
        this.props.getProduct({
            page: this.props.page,
            size: 6
        })
    }


    render() {
        let { productlist, isfinish } = this.props;
        return (
            <div className="productlist">
                <ul>
                    {productlist.map(item => {
                        return <Item data={item} key={item.id} />
                    })}
                </ul>
                {isfinish ? <span className="loadmore">我是有底线的</span> : <span className="loadmore" onClick={this.loadData.bind(this)}>点击加载更多</span>}

            </div>
        )
    }
}


const mapStateToProps = state => {
    return {
        productlist: state.indexReducer.productlist,
        page: state.indexReducer.page,
        isfinish: state.indexReducer.isfinish
    }
}

const mapDispatchToProps = dispatch => {
    return {
        getProduct: function (params) {
            dispatch(getProduct(params))
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Index);